<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <album-page-search
        :where="defaultWhere"
        :photoName="currentPhotoAlbum.name"
        @search="reload"
      />
      <div>
        <a-space>
          <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
            <template #icon>
              <plus-outlined />
            </template>
            <span>新建</span>
          </a-button>
        </a-space>
      </div>

      <a-row :gutter="16">
        <a-col
          v-for="(item, index) in data"
          :key="index"
          v-bind="
            styleResponsive
              ? { xl: 6, lg: 8, md: 12, sm: 12, xs: 24 }
              : { span: 6 }
          "
        >
          <a-card :bordered="true" hoverable style="margin-top: 16px">
            <template #cover>
              <a-image
                :src="API_BASE_URL + 'img?name=' + item.imgThumbnail"
                :style="{
                  width: '100%',
                  height:
                    currentPhotoAlbum.layout == 'HORIZONTAL'
                      ? '15rem'
                      : '25rem',
                  padding: '0.5rem'
                }"
                :placeholder="true"
                :preview="true"
              />
            </template>
            <a-card-meta :title="item.name">
              <template #description>
                <div class="project-list-desc" :title="item.name"></div>
              </template>
            </a-card-meta>
            <div class="ele-cell">
              <div class="ele-cell-content ele-text-secondary">
                创建时间：
                {{ moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
            <div
              class="ele-cell"
              style="justify-content: center; margin-top: 1rem"
            >
              <div class="ele-cell-title">
                {{ item.sort }}
              </div>
            </div>
            <template #actions>
              <a-tooltip title="编辑图片" @click="openEdit(item)">
                <edit-outlined />
              </a-tooltip>
              <a-tooltip title="删除图片">
                <a-popconfirm
                  placement="topRight"
                  title="确定要删除此图片吗？"
                  @confirm="deleteAlbum(item)"
                >
                  <delete-outlined />
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-card>
        </a-col>
      </a-row>
      <div class="ele-text-center" style="margin-top: 18px">
        <a-pagination
          :total="count"
          v-model:current="page"
          v-model:page-size="limit"
          @change="findDataList"
        />
      </div>
    </a-card>
    <!-- 编辑弹窗 -->
    <album-page-edit
      v-model:visible="showEdit"
      :data="current"
      :album-id="currentPhotoAlbum.id"
      @done="findDataList"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, unref, onBeforeMount } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import AlbumPageSearch from './compoments/album-search.vue';
  import AlbumPageEdit from './compoments/album-edit.vue';
  import { getAlbumPageList, deleteAlbumPage } from '@/api/albumPage';
  import type { AlbumPage, AlbumPageSearchParams } from '@/api/albumPage/model';
  import {
    EditOutlined,
    PlusOutlined,
    DeleteOutlined
  } from '@ant-design/icons-vue';
  import { API_BASE_URL } from '@/config/setting';
  import moment from 'moment';
  import 'moment/dist/locale/zh-cn';
  import { useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  moment.locale('zh-cn');
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const data = ref<AlbumPage[]>();

  const currentPhotoAlbum = ref({
    id: '',
    name: '',
    layout: ''
  });

  // 第几页
  const page = ref(1);

  // 每页多少条
  const limit = ref(8);

  // 总数量
  const count = ref(0);

  // // 当前选中数据
  const current = ref<AlbumPage | null>(null);

  // 是否显示编辑弹窗
  const showEdit = ref(false);
  currentPhotoAlbum.value.id = String(query.id);
  currentPhotoAlbum.value.name = String(query.name);
  currentPhotoAlbum.value.layout = String(query.layout);

  // 默认搜索条件
  const defaultWhere = reactive<AlbumPageSearchParams>({
    albumId: currentPhotoAlbum.value.id,
    name: ''
  });

  /* 打开编辑弹窗 */
  const openEdit = (row?: AlbumPage) => {
    current.value = row ?? null;
    showEdit.value = true;
  };

  /* 搜索 */
  const reload = (params: AlbumPageSearchParams) => {
    defaultWhere.name = params.name;
    data.value = [];
    findDataList();
  };

  //查询相册列表
  const findDataList = () => {
    getAlbumPageList(defaultWhere).then((res) => {
      data.value = res.list;
    });
  };
  //删除相册
  const deleteAlbum = (item: AlbumPage) => {
    deleteAlbumPage(item.id)
      .then(() => {
        message.success('删除成功');
        findDataList();
      })
      .catch((e) => {
        message.error(e.error);
      });
  };

  findDataList();
</script>
